<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title></title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/lcommon.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
  <div id="app" v-cloak v-loading="loading">
    <header id="header"></header>
    <div class="header-space"></div>
    <div class="commonHeight">
      <section class="g-crumb">
        <div class="content"><a href="">招聘</a> > <a href="" class="blue">活动</a></div>
      </section>
      <section v-if="list&&list.length>0" class="section91">
        <div class="content">
          <ul class="list">
            <li v-for="(item, i) in list" :key="i" @click="toDetail(item)">
              <div class="img"><a href="javascript:void(0)"><img :src="item.detail" alt=""></a></div>
              <div class="btm">
                <div class="time">{{item.created_at}}</div>
                <h3><a href="">{{item.name}}</a></h3>
                <div class="info"><span class="number">{{item.num}}人已报名</span><span
                    class="r orange">{{item.status}}</span></div>
              </div>
            </li>
          </ul>
  
          <div class="g-prvNxt">
            <a @click="getPage('pre')" href="javascript:void(0)" class="prev">&nbsp;</a>
            <a @click="getPage(item)" v-for="(item, i) in allPage" href="javascript:void(0)"
              :class="{on: page==item}">{{item}}</a>
            <a @click="getPage('next')" href="javascript:void(0)" class="next">&nbsp;</a>
            <select name="" id="pageSize">
              <option value="10">12条/页</option>
              <option value="20">24条/页</option>
              <option value="">36条/页</option>
              <option value="">48条/页</option>
              <option value="">60条/页</option>
            </select>
            跳至
            <input type="text" value="" id="pageVal" class="input">
            页
            <input @click="changePage" type="submit" style="line-height: 32px;" value="确定" class="btn">
          </div>
        </div>
      </section>
    </div>

    <footer id="footer"></footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/lcommon.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <!-- <script src="js/main.js"></script> -->
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/request.js"></script>
  <script>
    $(function () {
      $("#header").load("./lcommon/header.html");
      $("#footer").load("./lcommon/footer.html");
      $("header .menu li").eq(0).addClass('on')
    })

    var vm = new Vue({
      el: '#app',
      data: {
        loading:true,
        list: [],
        page: 1,
        allPage: [],
        paegSize: 12
      },
      mounted() {
        var that = this
        this.getList()
      },
      methods: {
        getList: function () {
          var vm = this
          var url = "person/activity"
          var p = {
            page: this.page
          }
          request(url, 'GET', JSON.stringify(p), function (res) {
            vm.loading = false
            var list = res.data.list
            vm.list = list

            var allPage = Math.ceil(res.data.total / vm.paegSize)
            var pages = []
            for (var i = 1; i <= allPage; i++) {
              pages.push(i)
            }
            vm.allPage = pages
          }, function (err) {
            vm.loading = false
            vm.$message.error(err.message);
          })
        },
        getPage(i) {
          var vm = this
          if (!i) {
            return
          }

          if (i == "pre") {
            if (vm.page == 1) {
              return
            }
            i = vm.page - 1
          } else if (i == "next") {
            if (vm.page == vm.allPage.length) {
              return
            }
            i = vm.page + 1
          } else if (typeof i == "string") {
            i = parseInt(i)
            if (!i) {
              i = vm.page
            } else {
              if (i > vm.allPage.length) {
                i = vm.allPage.length
              } else if (i <= 0) {
                i = 1
              }
            }
          }

          vm.page = i
          vm.getList()
        },
        changePage() {
          this.getPage($("#pageVal").val())
        },
        toDetail(item) {
          location.href = "10.html?id=" + item.id
        }
      },
    })
  </script>
</body>

</html>